<template>
  <div>
    <van-pull-refresh v-model="isRefreshLoading" @refresh="onRefresh">
      <van-list
          class="main-list"
          v-model="listLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <div class="todo-item body-content"
             v-for="(item, i) of todoList"
             :key="'todoItem' + i">
          <img v-if="type === 1" src="@/static/icon/radio/checked.png" alt=""/>
          <img v-if="type === 2" src="@/static/icon/radio/unchecked.png" @click="todoComplete(item.id)" alt=""/>
          <div @click="todoContent(item.id)">
            <div class="todo-content">
              {{ item.title }}
            </div>
            <div class="todo-right">
              <div class="todo-author">{{ item.author }}</div>
              <div class="todo-date">{{ item.actTime }}</div>
            </div>
          </div>

        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>

import {Toast} from "vant";

export default {
  name: "TodoMain",
  props: {
    type: {type: Number, default: () => (1)},
    todoList: {type: Array, default: () => ([])},
  },
  data() {
    return {
      tab: 1,
      isRefreshLoading: false,
      listLoading: false,
      finished: false,
    };
  },
  mounted() {
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.isRefreshLoading) {
          this.list = [];
          this.isRefreshLoading = false;
        }

        for (let i = 0; i < 1; i++) {
          this.todoList.push(this.todoList[0]);
        }
        this.listLoading = false;

        if (this.todoList.length >= 3) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.isRefreshLoading = true;
      this.onLoad();
      Toast('刷新成功')
    },
    todoComplete(id) {
      this.$emit("todoCompleteEvent", id);
    },
    todoContent(id) {
      this.$emit("todoContentEvent", id);
    },
  },
};
</script>
<style scoped>

.main-list {
  padding-top: 8px;
}

.todo-item {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ececec;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.todo-item > img {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.todo-content {
  width: 199px;
  padding-left: 10px;
  display: inline-block;
}

.todo-right {
  padding-left: 8px;
  width: 104px;
  display: inline-block;
  text-align: right;
}

.todo-author {
  height: 20px;
  color: #737373;
}

.todo-date {
  height: 18px;
  color: #737373;
}
</style>